<template>
  <Header />
  <div class="confirmOrder">
    <div class="bgColor">
        <h1 class="main-shopcart">确认订单</h1>
    </div>
    <div class="main">
          <div class="info">
              <div class="head">商品信息</div>
              <div 
                class="info-main"
                v-for="item in orderList"
                :key="item.bookId"
              >
                  <div class="courseInfo">
                      <div class="coursebg">
                          <img :src="item.bookInfo.photo" alt="">
                      </div>
                      <div class="courseName">
                        {{ item.bookInfo.book_name }}
                      </div>
                      <div class="count">
                        数量: {{ item.count }}本
                      </div>
                      <div class="coursePrice">
                          <span class="nowprice">￥{{ item.total_price }}</span>
                          <span class="oldprice">￥{{ +item.total_price + 99 }}</span>
                      </div>
                  </div>
              </div>
              <div class="choose">
                  <h3>支付方式 <span class="pay"></span></h3>
                  <div class="choosebg">
                    <el-radio-group v-model="payType">
                      <el-radio label="ali" size="large" border>支付宝支付</el-radio>
                      <el-radio label="wx" size="large" border>微信支付</el-radio>
                    </el-radio-group>
                  </div>
              </div>
              <ul class="foot">
                  <li class="foot-item">应付
                    <span class="unique">
                      ￥{{ totalPrice }}
                    </span>
                  </li>
                  <li>
                      <button class="btn" @click="confirmOrder">确认订单</button>
                  </li>
              </ul>
          </div>
      </div>
      <!-- 二维码对话框 -->
      <el-dialog
        v-model="dialogVisible"
        title="Tips"
        width="30%"
        :before-close="handleClose"
      >
        <div class="dialog-content">
          <img :src="payImgUrl" alt="">
          <span class="payMoney">请支付：{{ totalPrice }}元</span>
        </div>
        <template #title>
          <span>支付</span>
        </template>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogVisible = false">
              好的
            </el-button>
          </span>
        </template>
      </el-dialog>
  </div>

  <Footer />
</template>

<script setup>
//组件
import Header from '@/components/common/Header.vue'
import Footer from '@/components/common/Footer.vue'
import { useStore } from 'vuex';
import { onBeforeMount, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
// api
import cartModelApi from '@/request/api/cart.js'

// store
const store = useStore();
// 订单列表
const orderList = reactive([])
// 计算总价
const totalPrice = ref(0);
// 支付方式
const payType = ref('')
// 对话框是否可见状态
const dialogVisible = ref(false);

onBeforeMount(() => {
  orderList.push(...store.state.cart.selectList);
  orderList.forEach(item => {
    totalPrice.value += +item.total_price;
  })
})

const payImgUrl = ref('');
// 确认订单
const confirmOrder = () => {
  if(!payType.value){
    ElMessageBox.alert('请选择支付方式', '温馨提示', {
      confirmButtonText: 'OK',
    })
  }else{
    // 支付
    if(payType.value == 'ali'){
      // 支付宝支付
      payImgUrl.value = 'src/assets/pay/zfb.jpg';
    }
    if(payType.value == 'wx'){
      // 微信支付
      payImgUrl.value = 'src/assets/pay/wx.jpg';
    }
    // 未申请支付权限 就视为选择支付方式后就支付成功
    orderList.forEach((item) => {
      let p = {
        order_id: item.order_id,
        order_status: 2
      }
      cartModelApi.updateOrderStatusApi(p);
    })
    
    dialogVisible.value = true;
  }

  
}


</script>

<style scoped>
.finish{
  width: 170px;

  line-height: 30px;
  margin: 0 auto;
  display: flex;
  }
.success{
  margin-left: 20px;
  width: 70px;
  font-size:12px ;
  background: rgba(54, 137, 255, 0.22);
  color: #3692ff;
  cursor: pointer;
  border-radius: 8px;
}
.error{
  width: 100px;
  font-size:12px ;
  background: linear-gradient(90deg, #fc7979 0%, #da4848 100%);
  color: #ffffff;
  cursor: pointer;
  border-radius: 8px;

}
.el-dialog {
  text-align: center !important;
  border-radius: 10px!important;
}
.dialogPrice{
  padding-bottom: 20px;
  color: #93999F;
}
.prices{
  color: #F01414;
}
.alert{
  padding: 20px 0;
  font-size: 14px;
  color: #93999F;

}
.confirmOrder{
  width: 100%;
  padding-bottom:60px;
}
.bgColor{
  width: 100%;
  height: 200px;
  background-color: red;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}
.main-shopcart{
  width: 1200px;
  margin: 0 auto;
  height: 42px;
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 35px;
  color: #FFFFFF;
  padding: 30px 0;
  opacity: 1;
}
@keyframes gradient {
0% {
  background-position: 0% 50%;
}
50% {
  background-position: 100% 50%;
}
100% {
  background-position: 0% 50%;
}
}
.main{
  width: 1200px;
  margin: -100px auto 0 auto;
/*background-color: red;*/
}
.main h1{
  color: #FFFFFF;
  padding: 30px 0 30px 47px;

}
.info{
  width: 1200px;
  padding: 5px 0px 20px 0px;
  background: #F3F5F7;
  border-radius: 10px;
box-shadow: 0px 2px 5px #888888;
}
.info-main{
  margin: 10px 20px;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 20px;
}
.head{
  padding: 20px;
  font-size: 18px;
  color: #333333;
}
/* 课程信息 */
.courseInfo{
  display: flex;
  width: 100%;
  height: 350px;
  margin: 0 auto;
}
.coursebg{
  width: 280px;
  height: 350px;
}
.coursebg img{
  width: 100%;
  height: 100%;
}
.courseName{
  margin:0 20px;
  width: 400px;
  height: 160px;
  font-size: 16px;
  color: #07111B;
  line-height: 300px;
  word-break:keep-all;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.count{
  line-height: 300px;
}
.coursePrice{
  margin-left: 100px;
  height: 160px;
  text-align: right;
  line-height: 300px;
}
.coursePrice .nowprice{
  font-size: 18px;
  font-weight: 600;
  color: red;
}
.coursePrice .oldprice{
  padding-left: 10px;
  font-size: 14px;
  text-decoration: line-through;
  color: #93999F;

}
/* 支付开始 */
.choose{
  width: 1200px;
  margin: 0 auto;
}
.choose h3{
  color: #222;
  font-size: 16px;
  font-weight: 400;
  padding: 0 20px;
}
.choosebg{
  display: flex;
  margin: 20px;
}

.choosebg .el-button{
  margin-right: 10px;
}
 
.payment{
  width: 130px;
  height: 50px;
  border-radius: 10px;
  cursor: pointer;
  margin-right: 10px;
  line-height: 50px;
  display: flex;
  padding: 0 10px;
  align-items: center;
}
.payment i{
  font-size: 35px;
  margin-right: 10px;
}
.payment span{
  line-height: 50px;
  color: #222222;
  font-weight: bold;
}

.payStyle{
  background: url("/image/checkedVip.png") no-repeat;
  background-size: 220px 111px;
  background-position: -67px -59px;
  border: #ff470a solid 1px !important;
}
.alipayment{
border: #bfbfbf solid 1px;
color: #01a8eb;
}
.wxpayment{
border: #bfbfbf solid 1px;
color: #01af37;
}

/* 支付结束 */
/* 结算 */
.foot{
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 50px;
  line-height: 50px;
  color: #333333;
  margin-bottom: 10px;
}
.foot-item{
  width: 200px;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
}
.foot-item:first-child{
  margin-top: 3px;
}
.old{
  margin-left: 10px;
}
.unique{
  margin-left: 5px;
  font-size: 24px;
  color: #F01414;
}
.btn{
  margin-right: 20px;
  width: 150px;
  height: 50px;
  border: none;
  color: #FFFFFF;
  font-size: 20px;
  border-radius: 5px;
  background: #F01414;
  cursor: pointer;
  box-shadow: 0px 3px 5px 2px #ff727f;
}
.pay{
  font-size: 18px;
  padding-left: 10px;
  color:#F01414 ;
}
.codeimg{
  margin:0 auto;
  border: #d2d2d2 solid 1px;
  width: 150px;
  height: 150px;
}
.codeimg img{
  width: 100%;
  height: 100%;
}
.dialog-content{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dialog-content img{
  width: 350px;
  height: 450px;
}
.payMoney{
  font-size: 20px;
}
</style>